<script setup lang="ts">
import {PlanApi} from "@/api/cloud/plan.ts";
import {onMounted, ref} from "vue";
import   {cloud} from "@/api/dto";

const PageResult = ref<cloud.Plan[]>([])

onMounted(() => {
    PlanApi.PlanSearch({
        pageInfo: {page: 1, pageSize: 5},
        data: {
            ...cloud.DefaultValue.Plan
        }
    }).then(resp => {
        console.log(resp)
        PageResult.value = resp.data.items
    })
})

const formatTraffic = (data: number) => {
    return data / 1024
}
</script>

<template lang="pug">
.card_group
    .card(v-for="(item,index) in PageResult" )
        span.title {{item.name}} {{item.price}}
        span.buy buy now
        span 🌊月流量:traffic:{{formatTraffic(item.traffic)}}
        span 🔁当月流量重置包：
        span 🔁discount:{{item.discount}}
        span 🔁period:{{item.period}}
        span 🖥️设备限制数：不限:{{item.device_limit}}
        span ⚡峰值速率：不限:{{item.speed_limit}}
        span 🌏地区：港日美英新韩德土马印泰越澳
        span 🌏📖详细使用文档:{{item.speed_limit}}
        span ✈️加入:{{item.speed_limit}}

</template>

<style scoped lang="scss">
.card_group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 90vh;
    padding: 20px;
    justify-content: space-evenly;
    overflow: hidden;
}

.card {
    border: #6c6c6c 1px solid;
    padding: 2%;
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 25vw;
    min-width: 20vw;
    height: 32vh;
    min-height: 25vh;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, .04);
    justify-content: space-around;

    &:hover {
        box-shadow: 0 0 16px 0 rgba(115, 115, 115, 0.4);
    }

    span {
        padding-left: 8px;
        font-size: 18px;
    }

    .buy {
        height: 32px;
        font-size: 16px;
        cursor: pointer;
        width: 100%;
        margin: auto;
        text-align: center;
        color: rgb(206, 44, 44);
        background: rgba(255, 44, 44, 0.37);
        border: 1px solid rgb(206, 44, 44);
        border-radius: 4px;
    }

    .title {
        font-size: 16px;
        cursor: pointer;
        width: 100%;
        text-align: center;
        border-radius: 4px;
    }
}
</style>